<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Using FusionCharts with ASP.NET 2.0 (VB)&gt; Master Page Sample </h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>FusionCharts can effectively be used with VB (ASP.NET) Master Pages to plot dynamic data-driven charts. In this example, we'll show a  basic sample to help you get started.</p>
      <p>In this example we'll do the following:</p>
      <ol>
        <li>We'll create a simple master page.</li>
        <li>We'll define a content page for this master page </li>
        <li>We'll place a chart in this  content page.</li>
      </ol>
      <p><strong>Before you go further with this page, we recommend you to please see the 
							previous section &quot;Basic Examples&quot; as we start off from concepts 
	  explained in that page. </strong></p>    </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="highlightBlock">All code discussed here is present in <span class="codeInline">Download Package &gt; Code &gt; VB_NET </span> &gt; <span class="codeInline">MasterPage</span> folder. </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  
  <tr>
    <td valign="top" class="header">Creating a Master Page <span class="codeInline"></span></td>
  </tr>
  <tr>
    <td valign="top" class="text">We have created a simple master page with a header and a footer and a content place holder. The code of the master page (MasterPage.master) is as shown below: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">&lt;%@ Master Language=&quot;VB&quot; %&gt;<br />
      &lt;html&gt;<br />
       &nbsp;&nbsp; &lt;head runat=&quot;server&quot;&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &lt;style type=&quot;text/css&quot;&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &lt;!--<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; .text{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}<br />
&nbsp;&nbsp; &nbsp;&nbsp; --&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &lt;/style&gt;<br />
&nbsp;&nbsp; &lt;/head&gt;<br />
&nbsp;&nbsp; &lt;body&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;  &lt;center&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp; &lt;form id='form2' name='form1' method='post' runat=&quot;server&quot;&gt;<br />
<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &lt;h2&gt;FusionCharts Examples&lt;/h2&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &lt;h4&gt;Basic example - Using ASP.NET 2.0 Master Page&lt;/h4&gt;<br />
<strong><br />
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;asp:ContentPlaceHolder ID=&quot;ContentPlaceHolder1&quot; runat=&quot;server&quot;&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/asp:ContentPlaceHolder&gt;</strong><br />
<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &lt;p /&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &lt;h5&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; This page is built using &lt;a href=&quot;http://www.fusioncharts.com&quot; target=&quot;_blank&quot;&gt;<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; FusionCharts v3&lt;/a&gt; and ASP.NET 2.0 VB MasterPage<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &lt;/h5&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/form&gt;<br />
&nbsp;&nbsp; &nbsp; &lt;/center&gt;<br />
&nbsp;&nbsp; &lt;/body&gt;<br />
&lt;/html&gt;</td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="text"><ul>
      <li>We have added the header and footer text. </li>
      <li>We placed a content holder with id <span class="codeInline">ContentPlaceHolder1. </span><span class="text">Inside this we will place our chart from the main aspx file.<br />
        <br />
        The master page will look like the following in  Design view:
</span></li>
    </ul></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/VB_MP1.jpg" width="644" height="354" class="imageBorder" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  
  <tr>
    <td valign="top" class="header">Creating a content page </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="text">Now, lets create a content page to apply this master page and add a chart to it. Our content page ( Default.aspx) will be like this : </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">&lt;%@ Page Language=&quot;VB&quot; <strong>MasterPageFile=&quot;~/MasterPage.master&quot; </strong>CodeFile=&quot;Default.aspx.vb&quot; Inherits=&quot;_Default&quot; Title=&quot;FusionCharts Example - Using ASP.NET 2.0 Master Page&quot; %&gt;<br />
      <br />
      &lt;asp:Content ID=&quot;Content1&quot; ContentPlaceHolderID=&quot;<strong>ContentPlaceHolder1</strong>&quot; Runat=&quot;Server&quot;&gt;<br />
      <br />
      &nbsp;&nbsp; &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;FusionCharts/FusionCharts.js&quot;&gt;&lt;/script&gt;<br />
&nbsp;&nbsp; &lt;%<br />
<span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;
'Included FusionCharts.js to embed FusionCharts easily in web pages<br />
&nbsp;&nbsp;&nbsp;&nbsp;
'The following code will generate a chart from code behind file Default.aspx.cs<br />
</span>&nbsp;&nbsp;&nbsp;
%&gt;<br />
&nbsp;&nbsp; &lt;%=GetMonthlySalesChartHtml() %&gt;<br />
<br />
&lt;/asp:Content&gt;</td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="text"><ul>
      <li>Here, we set <span class="codeInline">MasterPageFile</span> attribute to bind the master page we just created.</li>
      <li>Next, we add the  Content control and mapp it to ContentPlaceHolder control on the master page.</li>
      <li>Inside the content we include FusionCharts.js to easily embed a chart. </li>
      <li>Finally, we call <span class="codeInline">GetMonthlySalesChartHtml()</span> from code belind file which renders the chart. </li>
    </ul></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="text">Let's see how <span class="codeInline">GetMonthlySalesChartHtml() works: </span></td>
  </tr>
  
  <tr>
    <td valign="top" class="codeBlock"><p>Imports InfoSoftGlobal<br />
        <br />
        Partial Class _Default<br />
        &nbsp;&nbsp;&nbsp;
Inherits System.Web.UI.Page</p>
      <p> &nbsp;&nbsp;&nbsp; Public Function GetMonthlyalesChartHtml() As String<br />
          <br />
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp; 'Create the chart - Column 3D Chart with data from Data/Data.xml</span><br />
        &nbsp;&nbsp;&nbsp;&nbsp;     
 &nbsp; Return FusionCharts.RenderChart(&quot;FusionCharts/Column3D.swf&quot;, &quot;Data/Data.xml&quot;, &quot;&quot;, &quot;myFirst&quot;, &quot;600&quot;, &quot;300&quot;, False, True)<br />
       &nbsp;&nbsp;&nbsp; End Function<br />
    End Class</p>    </td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>We've just used the <span class="codeInline">RenderChart()</span> method from <span class="codeInline">InfoSoftGlobal.</span><span class="codeInline">FusionCharts</span> class to return the HTML code for the chart (using JavaScript embedding). For simplicity we have used a physical <span class="codeInline">Data.xml</span> file to provide chart data using <span class="codeInline">dataURL</span> method.</p>      </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="text">The container page will show up the chart in browser like the screenshot below: </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/VB_MP2.jpg" width="607" height="439" class="imageBorder" /></td>
  </tr>
</table>
</body>
</html>
